<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入react.js 文件 , 相当于引入vue.js -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <!--引入react-dom.js  引入react操作dom 文件 -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 使用jsx 语法时,需要借助babel 这个插件, 将jsx 语法编译成js 语法,这样浏览器才能加载识别 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>

</body>

</html>
<script type="text/babel">
    // 第一步: 获取根标签容器div
    let app = document.querySelector('#app')
    // 第二步: 使用react-dom 提供的一个大对象 ReactDOM 对象, 使用他里面的一个方法 createRoot 创建一个根实例
    let root = ReactDOM.createRoot(app);
    //  第三步: 方式1 : 使用原生的写法去渲染一个dom,  渲染一个组件 注意: 参数为一个组件
    //React.createElement(标签名,属性对象,该div标签的子节点)
    //  root.render(React.createElement('div', { id: 100 }, '我是一个div元素'))
    // root.render(React.createElement('div', { id: 100 }, React.createElement('p', {}, '我是一个p元素')))


    // 第三步: 方式2: 使用jsx 语法去渲染一个dom结构(后面都使用该种方式渲染)
    const el = (
        <div>
            <p>
                我是jsx语法结构的dom模板
            </p>
        </div>
    )
    root.render(el)

  // 函数式编程
  // 函数式编程是一种编程模式 , 就是使用函数写程序, 实现函数得组合 封装  柯理化使用,
  // 使用函数去描述程序 例如比较典型代表的有: 例如react 中的使用函数组件方式编写程序, 贴近函数式编程
  // 或者vue中所有的逻辑都可以已组合函数的形式去编程逻辑,也贴近函数式编程

  // 声明式编程
  // 比如 html 和css 语言, 这种根据你描述的结构执行实现最终的结果, 这种就是声明式编程
  // 代表有 : vue 和react 中的 声明式渲染, 以及声明式导航等等 你描述Ui界面,程序自动帮你加载解析最终的效果
  // 声明式编程包含 函数式编程

</script>